<template>
    <div class="w-full h-full relative">
        <div id="mse" class="!w-full !h-full aspect-video"></div>
        <!-- <videoplay :id="`id_${monitorUrl + new Date().getTime()}`" video-url="monitorUrl" :isautoplay="true" /> -->
    </div>
</template>
<script setup lang="ts">
import videoplay from '@/components/videoplay/video.vue'
import Player, { Events } from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls'
const props = defineProps({
    monitorUrl: {
        type: String,
        default: () => ''
    },
    playDuration: {
        type: Number,
        default: () => 0
    }
})
const timer = ref(null)
onMounted(() => {
    const player = new Player({
        id: 'mse',
        url: props.monitorUrl,
        plugins: [HlsPlugin],// 引入插件
    })
    player.on(Events.PLAY, () => {
        if (props.playDuration) {
            timer.value && clearTimeout(timer.value)
			timer.value = setTimeout(() => {
                player.pause()
            }, props.playDuration * 60 * 1000);
        }
    })
});
onBeforeUnmount(() => {
	timer.value && clearTimeout(timer.value)
});
</script>
<style lang="scss" scoped></style>